<template>
	<mu-paper :z-depth="1" class="container">
		<mu-bottom-nav @change="handleTabChange">
			<mu-bottom-nav-item v-for='(t,i) in tabs' :value='i' :icon="t.icon" :title='t.title' :key="i"/>
		</mu-bottom-nav>
	</mu-paper>
</template>
<script>
	import Vue from "vue";
	import { switchTab } from "@/utils/switchTab.js";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import './assets/muse/MaterialIcons-Regular.css';

	Vue.use(MuseUI);

	export default {
		created() {
			function plusReady() {
				switchTab(0);
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
		},
		data() {
			return {
				tabs: [{
						title: '待收',
						icon: 'assignment',
						src: './index.index.html'
					},
					{
						title: '已收',
						icon: 'assignment_turned_in',
						src: './order.index.html'
					},
					{
						title: '管理',
						icon: 'view_list',
						src: './my.index.html'
					}/*,
					{
						title: '我的',
						icon: 'person',
						src: './my.index.html'
					}*/
				],
				shift: 'task'
			}
		},
		methods: {
			handleTabChange(val) {
				switchTab(val, this.tabs);
			}
		}
	};
</script>

<style lang="less">
	.container {
		width: 100%;
		max-width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.mu-bottom-nav {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
	
</style>